<template>
  <div class="forum_detail" v-loading="loading">
    <header class="header">
      <a class="title" href="/#/forum" target="_blank">数字经济图书馆论坛</a>
    </header>
    <div class="post">
      <p class="title">{{ form.title | across }}</p>
      <p class="handle">
        发表于<span>{{ form.articleTime | across }}</span>
      </p>
      <p class="content">
        {{ form.content }}
      </p>
      <!-- <div class="collection" :class="{ active: form.followed }">
        <i class="el-icon-star-on"></i>
        {{ form.followed ? "取消收藏" : "收藏" }}
      </div> -->
      <!-- <div class="item">发布账号{{ form.userName | across }}</div> -->
      <!-- <div class="item">标题{{ form.title | across }}</div> -->
      <!-- <div class="item">摘要{{ form.intro | across }}</div>
      <div class="item">作者{{ form.authors | across }}</div>
      <div class="item">时间{{ form.articleTime | across }}</div>
      <el-divider content-position="left">内容</el-divider>
      <div class="content" v-html="form.content"></div> -->
    </div>
    <footer class="footer"></footer>
  </div>
</template>

<script>
import Mixin from "@/mixins/list";
import apiCode from "@/api/apiConfig";
import { mapState } from "vuex";

export default {
  components: {},
  filters: "",
  data() {
    return {
      loading: false,
      form: {},
    };
  },
  watch: {
    $route(params) {
      this.getForumDeatail(params.query);
    },
  },
  mounted() {
    this.getForumDeatail(this.$route.query);
  },
  methods: {
    async getForumDeatail(query) {
      this.loading = true;
      const result = await this.$get(`api/article/${query.id}`);
      this.loading = false;
      if (result && result.code === apiCode.code.success) {
        this.form = result.data || {};
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.forum_detail {
  .header {
    .title {
      font-size: 22px;
      font-weight: 700;
      color: #111e36;
    }
  }
  .post {
    .title {
      font-size: 24px;
      font-weight: 700;
      line-height: 40px;
      color: #111e36;
    }
    .handle {
      font-weight: 400;
      font-size: 14px;
      color: #666d7f;
    }
  }
}
</style>
